<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,html{
				padding: 0;
				margin: 0;
				background:#0A0F23;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
	
		<div class="contentCharts" id="mainChart" style="width:100%;height:100%;"></div>	
			
		<script src="../../components/echarts.min.js"></script>
		<script type="text/javascript">
			var mainChart = echarts.init(document.getElementById('mainChart'));
			var option = {
				itemStyle: {
	                normal: {
	                 
	                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
	                        offset: 0,
	                        color: 'rgba(53, 53,245, 1)'
	                    }, {
	                        offset: 1,
	                        color: 'rgba(17, 168,171, 1)'
	                    }]),
	                    shadowColor: 'rgba(0, 0, 0, 0.1)',
	                    shadowBlur: 10
	                }
	            },
				title: {
					text: '到访市前五排名',
					left: 'center',
					top:'5%',
	                    textStyle: {
	                        fontWeight: 'bolder',
	                        fontSize: 22,
	                        color: '#fff'
	                        
	                    }
					
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				
				grid: {
					left: '3%',
					right: '4%',
					bottom: '5%',
					top:"13%",
					containLabel: true
				},
				xAxis: {
							type : 'value',
							min:0,
							max: 60,
							interval: 10,
							axisTick: {
								alignWithLabel: true
							},
							axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
				            interval: 0,
				            textStyle: {
				                color: '#fff',fontSize:16
				            }
				        },
                        axisTick: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
						splitLine: {
                            show: false
                        }
							
						
				},
				yAxis: {
					type: 'category',
					data: ['郑州市','广州市','济南市','上海市','北京市'],
					axisTick: {
								alignWithLabel: true
							},
							axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
				            interval: 0,
				            textStyle: {
				                color: '#fff',fontSize:16
				            }
				        },
						splitLine: {
                            show: false
                        }
				},
				series: [
					{
						name: '2011年',
						type: 'bar',
						data: [18, 19, 21 ,23,57],
						barWidth :20,
						label: {
			                normal: {
			                    show: true,
			                    position: 'inside'
			                }
			            }
					},
					
				]
			};



        mainChart.setOption(option);
		</script>
	</body>
</html>
